<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <ul>
        <li @click="handleClick(1,$event)">第一个li</li>
        <li @click="handleClick(2,$event)">第二个li</li>
        <li @click="handleClick(3,$event)">第三个li</li>
    </ul>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            handleClick: function(num,e) {
                e.target.style.backgroundColor = 'green'
                if(num == 1) {
                  e.target.style.backgroundColor = 'green'
                }else if(num == 2) {
                  e.target.style.backgroundColor = 'red'
                }else if(num == 3) {
                  e.target.style.backgroundColor = 'orange'
                }
            }
        }
    })
    // 我们为每一个li都绑定了点击事件, 并且绑定了同一个事件处理函数
    // 需求1: 点谁, 谁变绿
    // 需求2: 点击第一个li, 将其背景颜色变为绿色, 点击第二个li, 将其背景颜色变为红色,点击第一个li, 将其背景颜色变为蓝色
  </script>
</body>

</html>